<template>
  <transition name="modal">
    <div v-if="show" class="basket-modal-box" @click.self="$emit('close')">
      <div class="modal-box-content">
        <slot  />
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="sass">
.basket-modal-box
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: rgba(0, 0, 0, .5)
  .modal-box-content
    position: absolute
    right: 0
    bottom: 0
    left: 0
    top: 30%
    background: #fff
    padding: 20px
.modal-enter,
.modal-leave-to
  transform: translateY(100%)
.modal-enter-active,
.modal-leave-active
  transition: .5s
</style>
